<template>
  <el-dialog
    :model-value="visible"
    title="场馆详情"
    width="800px"
    @close="handleClose"
  >
    <div v-loading="loading" class="venue-detail">
      <template v-if="venueData">
        <!-- 基本信息 -->
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="场馆名称">
            <el-tag
              :type="getStatusType(venueData.status)"
              size="small"
              style="margin-right: 8px"
            >
              {{ getStatusText(venueData.status) }}
            </el-tag>
            {{ venueData.name }}
          </el-descriptions-item>
          <el-descriptions-item label="场馆容量">
            {{ venueData.capacity ? `${venueData.capacity}人` : '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="城市">{{ venueData.city }}</el-descriptions-item>
          <el-descriptions-item label="国家">{{ venueData.country }}</el-descriptions-item>
          <el-descriptions-item label="场馆地址" :span="2">
            {{ venueData.address }}
          </el-descriptions-item>
          <el-descriptions-item label="场馆描述" :span="2">
            {{ venueData.description || '暂无描述' }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 联系信息 -->
        <el-descriptions title="联系信息" :column="2" border style="margin-top: 20px">
          <el-descriptions-item label="联系电话">
            {{ venueData.contactPhone || '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="联系邮箱">
            {{ venueData.contactEmail || '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="网站地址" :span="2">
            <el-link
              v-if="venueData.website"
              :href="venueData.website"
              target="_blank"
              type="primary"
            >
              {{ venueData.website }}
            </el-link>
            <span v-else>未设置</span>
          </el-descriptions-item>
        </el-descriptions>

        <!-- 地理位置 -->
        <el-descriptions title="地理位置" :column="2" border style="margin-top: 20px">
          <el-descriptions-item label="纬度">
            {{ venueData.latitude || '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="经度">
            {{ venueData.longitude || '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="地图位置" :span="2" v-if="venueData.latitude && venueData.longitude">
            <div class="map-placeholder">
              <el-icon><Location /></el-icon>
              <span>纬度: {{ venueData.latitude }}, 经度: {{ venueData.longitude }}</span>
              <el-button
                type="primary"
                size="small"
                @click="openMap"
                style="margin-left: 10px"
              >
                在地图中查看
              </el-button>
            </div>
          </el-descriptions-item>
        </el-descriptions>

        <!-- 关联信息 -->
        <el-descriptions title="关联信息" :column="2" border style="margin-top: 20px">
          <el-descriptions-item label="楼层数量">
            {{ venueData._count?.floors || 0 }} 层
          </el-descriptions-item>
          <el-descriptions-item label="演出数量">
            {{ venueData._count?.performances || 0 }} 场
          </el-descriptions-item>
        </el-descriptions>

        <!-- 楼层列表 -->
        <div v-if="venueData.floors && venueData.floors.length > 0" style="margin-top: 20px">
          <h4>楼层信息</h4>
          <el-table :data="venueData.floors" border style="width: 100%">
            <el-table-column prop="name" label="楼层名称" width="120" />
            <el-table-column prop="level" label="楼层" width="80" />
            <el-table-column prop="description" label="描述" show-overflow-tooltip />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getFloorStatusType(row.status)" size="small">
                  {{ getFloorStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 演出列表 -->
        <div v-if="venueData.performances && venueData.performances.length > 0" style="margin-top: 20px">
          <h4>近期演出</h4>
          <el-table :data="venueData.performances" border style="width: 100%">
            <el-table-column prop="title" label="演出名称" min-width="150" show-overflow-tooltip />
            <el-table-column prop="startTime" label="开始时间" width="180">
              <template #default="{ row }">
                {{ formatDate(row.startTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="180">
              <template #default="{ row }">
                {{ formatDate(row.endTime) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getPerformanceStatusType(row.status)" size="small">
                  {{ getPerformanceStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="艺术家" width="120">
              <template #default="{ row }">
                <div v-if="row.artist" class="artist-info">
                  <el-avatar :size="24" :src="row.artist.avatar" />
                  <span style="margin-left: 8px">{{ row.artist.name }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 时间信息 -->
        <el-descriptions title="时间信息" :column="2" border style="margin-top: 20px">
          <el-descriptions-item label="创建时间">
            {{ formatDate(venueData.createdAt) }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDate(venueData.updatedAt) }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleEdit" v-if="venueData">
          编辑场馆
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Location } from '@element-plus/icons-vue'
import type { VenueData } from '@/api/venue'
import { getVenueById } from '@/api/venue'
import { formatDate } from '../../../utils/date'

// Props
interface Props {
  visible: boolean
  venueId: number | null
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'update:visible': [value: boolean]
  'edit': [venueData: VenueData]
}>()

// 响应式数据
const loading = ref(false)
const venueData = ref<VenueData | null>(null)

// 监听场馆ID变化
watch(
  () => props.venueId,
  async (newId) => {
    if (newId && props.visible) {
      await fetchVenueDetail(newId)
    }
  },
  { immediate: true }
)

// 监听对话框显示状态
watch(
  () => props.visible,
  async (newVisible) => {
    if (newVisible && props.venueId) {
      await fetchVenueDetail(props.venueId)
    }
  }
)

// 获取场馆详情
const fetchVenueDetail = async (id: number) => {
  try {
    loading.value = true
    const response = await getVenueById(id)
    if (response.success && response.data) {
      venueData.value = response.data
    }
  } catch (error) {
    console.error('获取场馆详情失败:', error)
    ElMessage.error('获取场馆详情失败')
  } finally {
    loading.value = false
  }
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
  venueData.value = null
}

// 编辑场馆
const handleEdit = () => {
  if (venueData.value) {
    emit('edit', venueData.value)
    handleClose()
  }
}

// 打开地图
const openMap = () => {
  if (venueData.value?.latitude && venueData.value?.longitude) {
    const url = `https://maps.google.com/?q=${venueData.value.latitude},${venueData.value.longitude}`
    window.open(url, '_blank')
  }
}

// 状态相关
const getStatusType = (status: string): 'success' | 'info' | 'warning' | 'danger' => {
  const statusMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
    ACTIVE: 'success',
    INACTIVE: 'info',
    MAINTENANCE: 'warning'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    ACTIVE: '活跃',
    INACTIVE: '停用',
    MAINTENANCE: '维护中'
  }
  return statusMap[status] || '未知'
}

const getFloorStatusType = (status: string): 'success' | 'info' | 'warning' | 'danger' => {
  const statusMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
    ACTIVE: 'success',
    INACTIVE: 'info'
  }
  return statusMap[status] || 'info'
}

const getFloorStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    ACTIVE: '活跃',
    INACTIVE: '停用'
  }
  return statusMap[status] || '未知'
}

const getPerformanceStatusType = (status: string): 'success' | 'info' | 'warning' | 'danger' => {
  const statusMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
    SCHEDULED: 'info',
    ONGOING: 'success',
    COMPLETED: 'warning',
    CANCELLED: 'danger'
  }
  return statusMap[status] || 'info'
}

const getPerformanceStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    SCHEDULED: '已安排',
    ONGOING: '进行中',
    COMPLETED: '已完成',
    CANCELLED: '已取消'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped lang="scss">
.venue-detail {
  .map-placeholder {
    display: flex;
    align-items: center;
    color: #606266;
    
    .el-icon {
      margin-right: 8px;
      color: #409eff;
    }
  }

  .artist-info {
    display: flex;
    align-items: center;
  }

  h4 {
    margin: 0 0 10px 0;
    color: #303133;
    font-size: 16px;
  }
}

.dialog-footer {
  text-align: right;
}
</style>
